<template>
  <div class="welcome">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">店铺基本信息</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="welcome">
      <!-- <div slot="header" class="clearfix">
        <span>商铺基本信息</span>
      </div> -->
      <!-- 商铺基本信息 -->
      <el-row class="header">
        <el-col :span="2">
          <div class="arrt">
            <img src="../../assets/images/arrt.jpg" />
            <span>{{ StroreInfo.store_id }}</span>
            <i class="vip">v1</i>
          </div>
        </el-col>
        <el-col :span="19">
          <div class="info">
            <p class="store_name">{{ StroreInfo.store_name }}</p>
            <div class="address">
              <i class="el-icon-location" style="color:#0039FD"></i>
              <span>{{ StroreInfo.store_address }}</span>
            </div>
            <div class="store-images">
              <div>
                <p>店铺实拍图</p>

                <img
                  v-for="(v, i) in StroreInfo.live_shot"
                  :key="i"
                  :src="v"
                  alt
                />
              </div>
              <div class="license">
                <p>营业资质</p>
                <img
                  v-for="(v, i) in StroreInfo.Business_license"
                  :key="i"
                  :src="v"
                  alt
                />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="setting" @click="dialogVisible = true">
            <i class="el-icon-s-tools"></i>
            <span>高级设置</span>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 商铺基本信息end -->
    <!-- 数据统计 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>订单详情信息</span>
      </div>
      <el-row class="statistics" :gutter="10">
        <el-col :span="3">
          <div
            class="item"
            style=" background: linear-gradient(to right, #f01f62, #f255bc);"
          >
            <i class="el-icon-cherry icons"></i>
            <div class="num">
              <span class="sum">{{ order.collection }}</span>
              <span>总订单收款</span>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div
            class="item"
            style=" background: linear-gradient(to right, #F98137, #F9BE64);"
          >
            <i class="el-icon-grape icons"></i>
            <div class="num">
              <span class="sum">{{ order.account_collection }}</span>
              <span>订单退款</span>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div
            class="item"
            style=" background: linear-gradient(to right, #8755D7, #7B89F8);"
          >
            <i class="el-icon-watermelon icons"></i>
            <div class="num">
              <span class="sum">{{ order.material_collection }}</span>
              <span>总素材收益</span>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div
            class="item"
            style=" background: linear-gradient(to right, #79D724, #ABEE4C);"
          >
            <i class="el-icon-apple icons"></i>
            <div class="num">
              <span class="sum">{{ order.refund }}</span>
              <span>账户总收益</span>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div
            class="item"
            style=" background: linear-gradient(to right, #15CEF2, #90DEED);"
          >
            <i class="el-icon-pear icons"></i>
            <div class="num">
              <span class="sum">{{ order.withdrawal || '' }}</span>
              <span>总提现金额</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 数据统计end -->
    <!-- 商品总数 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>商品信息</span>
      </div>
      <div class="eacharts">
        <index-echat
          v-if="goods.admin_goods"
          :data.sync="active === 1 ? goods.admin_goods : goods.new_goods"
        ></index-echat>
        <el-card class="box-card">
          <h3>商品总数量：{{ goods.count }}</h3>
          <div :class="[active === 1 ? 'active' : '']" @click="active = 1">
            <i class="el-icon-caret-left"></i>
            <span>管理商品</span>
          </div>
          <div :class="[active === 2 ? 'active' : '']" @click="active = 2">
            <i class="el-icon-caret-left"></i>
            <span>新增商品</span>
          </div>
        </el-card>
      </div>
    </el-card>
    <!-- 商品总数End -->
    <!-- 待处理事项 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>待处理事项</span>
      </div>
      <el-row class="peisong" :gutter="20">
        <div @click="$router.push('/orderList')">
          <el-tooltip
            effect="dark"
            content="去处理"
            :enterable="false"
            placement="top"
            v-for="(v, i) in peisong"
            :key="i"
          >
            <el-col :span="2" class="items">
              <el-badge :value="handle[v.name]">
                <i
                  :class="[v.icon]"
                  class="tubiao"
                  :style="{ background: v.bgc }"
                ></i>
              </el-badge>
              <span>{{ v.span }}</span>
            </el-col>
          </el-tooltip>
        </div>
      </el-row>
    </el-card>
    <!-- 待处理事项end -->
    <!-- 修改店铺信息对话框 -->
    <el-dialog
      title="修改店铺基本信息"
      :visible="dialogVisible"
      width="50%"
      @close="handleClose"
      @closed="handleClose"
    >
      <index-edit :store="StroreInfo" ref="editRef"></index-edit>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editStore">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 放大图片 -->
  </div>
</template>
<script>
import indexEchat from './compnent/echart.vue'
import indexEdit from './compnent/editStoreInfo'
import { setItem, getItem } from '@/api/storages.js'
export default {
  name: 'welcome',
  data() {
    return {
      active: 1, // 1管理商品，2、新增商品
      Info: {},
      eacharts: {},
      shopAll: {},
      dialogVisible: false,
      peisong: [
        {
          icon: 'el-icon-data-analysis',
          bgc: '#6F9EF2',
          name: 'handle',
          span: '待配送'
        },
        {
          icon: 'el-icon-office-building',
          bgc: '#6EDC73',
          name: 'self_raising',
          span: '待自提'
        },
        {
          icon: 'el-icon-data-board',
          bgc: '#F68A7B',
          name: 'deliver_goods',
          span: '待发货'
        },
        {
          icon: 'el-icon-dessert',
          bgc: '#B084D8',
          name: 'after_sale',
          span: '售后处理'
        }
      ]
    }
  },
  computed: {
    StroreInfo() {
      return this.Info ? this.Info : ''
    },
    order() {
      return this.shopAll.order ? this.shopAll.order : ''
    },
    handle() {
      return this.shopAll.handle ? this.shopAll.handle : ''
    },
    goods() {
      return this.shopAll.goods ? this.shopAll.goods : ''
    }
  },
  methods: {
    handleClose() {
      // console.log('关闭')
      this.$refs.editRef.$refs.form.resetFields()
      // console.log(this.$refs.editRef)
      this.dialogVisible = false
    },
    editStore() {
      this.Info = { ...this.$refs.editRef.info }
      this.Info.store_address = this.$refs.editRef.info.store_address.join(' ')
      setItem('STORE_INFO', this.Info)
      this.dialogVisible = false
    },
    async getStroeInfo() {
      const { data: res } = await this.$http.get('/shop/info')
      this.Info = res
      console.log(res, '基本信息')
      setItem('STORE_INFO', this.StroreInfo)
    },
    async getShopAll() {
      const { data: res1 } = await this.$http.get('/shop/all')
      this.shopAll = res1.data
      setItem('SHOP_ALL', this.shopAll)
      console.log(this.shopAll, '收款信息')
      this.eacharts = this.goods.admin_goods
    }
  },
  components: {
    indexEchat,
    indexEdit
  },
  mounted() {
    this.Info = getItem('STORE_INFO')
    this.shopAll = getItem('SHOP_ALL')
    console.log(this.StroreInfo, this.shopAll, 'local')
    if (!this.Info) {
      this.getStroeInfo()
    }
    if (!this.shopAll) {
      this.getShopAll()
    } else {
      this.eacharts = this.goods.admin_goods
    }
    console.log(this.eacharts, '....')
  }
}
</script>
<style lang="less" scoped>
.eacharts {
  display: flex;
  justify-content: space-around;
  // margin-top: 30px;
  .box-card {
    width: 280px;
    height: 300px;
    margin-top: 30px;
    div {
      font-size: 16px;
      cursor: pointer;

      i {
        color: cornflowerblue;
      }
    }
    .active {
      color: cornflowerblue;
    }
  }
}
.peisong {
  .items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    position: relative;
    /deep/.el-badge__content {
      width: 20px;
      height: 20px;
      top: 10px;
      left: 10px;
    }
    .tubiao {
      width: 60px;
      height: 60px;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      line-height: 60px;
      font-size: 24px;
    }
    span {
      margin-top: 5px;
    }
  }
}
.statistics {
  .item {
    width: 170px;
    height: 80px;
    border-radius: 5%;
    color: #fff;
    display: flex;
    .icons {
      font-size: 40px;
      margin: 24px 0 0 10px;
    }
    .num {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      padding: 15px;
      .sum {
        font-size: 30px;
      }
    }
  }
  // margin: 80px 0 40px;
  padding-left: 30px;
  font-size: 18px;
}
.welcome {
  // margin: 15px 0;
  .header {
    // border: 1px #ccc solid;
    // border-radius: 10px;
    // padding: 20px;

    .setting {
      color: #0039fd;
      display: flex;
      flex-direction: column;
      align-content: center;
      align-items: center;
      text-align: right;
      padding: 10px 20px 0 0;
      .el-icon-s-tools {
        font-size: 40px;
      }
      span {
        font-size: 16px;
      }
    }
    .info {
      .store_name,
      .el-icon-location {
        font-size: 24px;
        margin: 5px 0 10px;
      }
      .store-images {
        display: flex;
        justify-content: flex-start;
        div {
          p {
            margin: 20px 0 5px;
          }
          img {
            width: 150px;
            height: 150px;
            margin: 5px;
          }
          :nth-child(2) {
            margin-left: 20px;
          }
        }
        .license {
          margin-left: 50px;
        }
      }
    }
    .arrt {
      width: 100px;
      height: 100px;
      margin: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      align-items: center;
      position: relative;
      .vip {
        position: absolute;
        top: -18px;
        right: -10px;
        font-size: 24px;
        color: crimson;
        font-weight: 900;
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      span {
        margin-top: 5px;
        font-size: 16px;
        color: #ccc;
      }
    }
  }
}
.el-card {
  margin: 15px 0 0 0;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
</style>
